<template>
  <zw-card title="工单状态统计" :line="1">
    <div class="order-statistic">
      <!-- 统计所有数据，按状态 -->
      <div class="item" id="countByState" style="width: 100%; height: 100%;"></div>
    </div>
  </zw-card>
</template>
<script lang="ts" setup>
import ZwCard from "@/components/CardFrame/ZwCard.vue";
import ApiTree from "@/server/api-tree";
import { onMounted, ref } from "vue";
import * as echarts from 'echarts';


const getData = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.countByState();
  if (success) {
    option.value.data = data.map(x => {
      return {
        name: x.orderStatusName,
        value: x.count
      }
    })
    dateStatisticChart.value = echarts.init(document.getElementById('countByState'));
    dateStatisticChart.value?.setOption({
      tooltip: {
        trigger: 'item'
      }, legend: {
        orient: 'vertical',
        left: 'left',
      }, grid: {
        left: 'center', // 或者使用百分比，如 '50%'
        top: 'middle', // 或者使用百分比，如 '50%'
        containLabel: true // 确保标签在网格内
      },
      series: [
        option.value
      ]
    });
  }
}
const dateStatisticChart = ref<echarts.ECharts>();
onMounted(() => {

  getData();
})
/** Echarts配置 */
const option = ref<echarts.PieSeriesOption>({
  name: '工单状态统计',
  type: 'pie',
  radius: '50%',
  label: {
    show: true,
    position: 'inner', // 数值显示在内部
    formatter: '{d}%', // 格式化数值百分比输出
  },
  data: [],
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
});
</script>
<style lang="scss" scope>
.order-statistic {
  width: 100%;
  height: calc(100% - 32px);

  .item {
    // width: calc(66% - 12px);
    height: 100%;
    margin: 0px 6px;
  }
}
</style>
